<template>
	<div class="events">
		<Header />
		<div class="page-header">
			<h1>汉中近期活动</h1>
			<p>了解汉中最新的文化活动、节庆庆典和旅游盛事</p>
		</div>
		<div class="events-container">
			<el-timeline>
				<el-timeline-item v-for="(event, index) in filterEventList" :key="index" :timestamp="event.startDate"
					placement="top">
					<el-card class="event" shadow="hover"
						@click="$router.push({ name: 'EventDetail', params: { id: event.id } })">
						<img :src="event.image" :alt="event.title" />
						<div class="card-content">
							<h3>{{ event.title }}</h3>
							<p>{{ event.description }}</p>
							<p>&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
								&nbsp &nbsp &nbsp
								&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
								&nbsp &nbsp &nbsp &nbsp &nbsp
								&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
								&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
								&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
								&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
								&nbsp &nbsp &nbsp &nbsp &nbsp
								&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
								&nbsp &nbsp--活动地点：

								{{ event.location }}
							</p>
							<el-button type="primary" size="small"
								@click="$router.push({ name: 'EventDetail', params: { id: event.id } })"
								class="detail-button">查看详情</el-button>
						</div>
					</el-card>
				</el-timeline-item>
			</el-timeline>
		</div>
	</div>
</template>

<script>
	import Header from '@/components/Header.vue'

	export default {
		name: 'Events',
		components: {
			Header
		},
		data() {
			return {
				events: [],
				filterEventList: [],
				isInitialized: false
			}
		},
		mounted() {
			if (!this.isInitialized) {
				this.findList();
				this.isInitialized = true;
			}
		},
		watch: {
			'$route.query.q': {
				immediate: true,
				handler(newQ) {
					this.filterEvents(newQ);
				}
			}
		},
		methods: {
			filterEvents(q) {
				if (!q) {
					this.filterEventList = this.events;
					return;
				}
				const keyword = q.toLowerCase();
				this.filterEventList = this.events.filter(item =>
					item.title.toLowerCase().includes(keyword) ||
					(item.description && item.description.toLowerCase().includes(keyword))
				);
			},
			findList() {
				this.$http.get("userApi/eventCtl/info").then((resp) => {
					if (resp.data.code == 200) {
						this.events = resp.data.data;
						this.filterEvents(this.$route.query.q);
					}
				})
			}
		},
		activated() {
			// 当页面被激活时（从缓存中恢复），重新过滤数据
			// 无论是否有搜索关键词，都要重新过滤
			this.filterEvents(this.$route.query.q);
		}
	}
</script>

<style scoped>
	.events {
		padding-top: 100px;
	}

	.page-header {
		max-width: 1200px;
		margin: 0 auto 40px;
		text-align: center;
	}

	.events-container {
		max-width: 1000px;
		margin: 0 auto;
		padding: 0 20px;
	}

	.event-card {
		width: 100%;
		margin-bottom: 20px;
	}

	.event-location {
		color: #606266;
		margin: 10px 0;
		font-size: 14px;
	}

	.event-description {
		color: #303133;
		line-height: 1.6;
	}

	.more-info {
		color: #409EFF;
		padding: 0;
		margin-top: 10px;
	}
</style>